<template>
  <div class="cont-top-box">
    <el-form label-width="100px">
      <el-form-item label="部门">
        <el-checkbox-group v-model="departmentChecks" style="display:inline-block">
          <el-checkbox v-for="item in departmentList" :key="item.id" :label="item.id" @change="checkChange(item)">{{ item.name
            }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="社保城市">
        <el-checkbox-group v-model="socialSecurityChecks" style="display:inline-block">
          <el-checkbox v-for="item in cityList" :key="item.cityId" :label="item.cityId" @change="checkChange(item)">{{ item.cityName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="公积金城市">
        <el-checkbox-group v-model="providentFundChecks" style="display:inline-block">
          <el-checkbox v-for="item in cityList" :key="item.cityId" :label="item.cityId" @change="checkChange(item)">{{ item.cityName }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDepartment } from '@/api/department'
import { getCitys } from '@/api/social'
export default {
  name: 'SocialTool',
  data() {
    return {
      tips: {},
      keyword: '',
      departmentChecks: [],
      socialSecurityChecks: [],
      providentFundChecks: [],
      cityList: [],
      departmentList: []

    }
  },
  created: function () {
    this.fetchCityList()
    this.getDepartment()
  },
  methods: {
    checkChange(item) {
    // 确定当前被点击的复选框是否被选中
    console.log(this.providentFundChecks)
    console.log("this.socialSecurityChecks", this.socialSecurityChecks)
    console.log("this.departmentChecks", this.departmentChecks)
    const isChecked = this.providentFundChecks.includes(item.cityId);
    this.$emit('updateCity',{citys: this.providentFundChecks,citys2: this.socialSecurityChecks,departments: this.departmentChecks});

    if (isChecked) {
    //   // 如果是选中状态，可以执行一些操作，例如记录选中的城市
    //   console.log(`选中的城市: ${item.cityName}`);
    //   // 例如，可以在这里添加逻辑来处理选中的城市
    //   this.$emit('updateCity',{cityName: item.cityName});
    // } else {
    //   // 如果是未选中状态，可以执行其他操作
    //   console.log(`取消选中的城市: ${item.cityName}`);
    }
    // const index = this.providentFundChecks.indexOf(item.cityId);
    // this.providentFundChecks.splice(index, 1);
    // console.log(index)
    // if (index > -1) {
    //   // 如果已经选中，则取消选中
    //   this.providentFundChecks.splice(index, 1);
    // } else {
    //   // 如果未选中，则添加到选中数组
    //   this.providentFundChecks.push(item.cityId);
    // }
    // console.log(this.providentFundChecks)
  },
    fetchCityList() {
      getCitys().then(response => {
        // 处理返回的数据
        console.log(response); // 假设返回的数据在response.data中
        this.cityList = response.list;
      }).catch(error => {
        // 处理请求过程中出现的错误
        console.error('请求城市列表失败:', error);
      });
    },
    // 获取组织架构
    async getDepartment() {
      this.departmentList = await getDepartment()
    },
    // checkChange() {
    //   console.log(this.departmentChecks, this.socialSecurityChecks, this.providentFundChecks)
    //   const selectParams = {
    //     'departmentChecks': this.departmentChecks,
    //     'socialSecurityChecks': this.socialSecurityChecks,
    //     'providentFundChecks': this.providentFundChecks
    //   }
    //   this.$parent.changeSelectParams && this.$parent.changeSelectParams(selectParams)
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cont-top-box {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
